<template>
 <div class="container">
   <div class="search">
     <el-input
         v-model="input"
         placeholder="请输入你要下载的小说"
         class="input-with-select"
     >
       <template #append>
         <el-button :icon="Search" @click="search"></el-button>
       </template>
     </el-input>
   </div>
   <div class="result">
     <el-table v-if="list.length>0" :data="list" style="width: 100%">
       <el-table-column prop="book_name" label="书名" />
       <el-table-column prop="author" label="信息"  />
       <el-table-column label="操作">
         <template #default="scope">
           <el-button size="mini" type="primary" @click="download(scope.row)"
           >下载</el-button
           >
         </template>
       </el-table-column>
     </el-table>
   </div>
 </div>
</template>

<script setup>
import { Search } from '@element-plus/icons'
import {reactive, ref} from "vue";
const input=ref('')
const list=ref([])
const search=()=>{
  fetch("http://api.one-cloud.xyz/search?keyword="+input.value)
  .then(res=>res.json()).then(res=>{
    list.value=res.result
    console.log(list)
  })
}
function getStr(str) {
  let result=str.match(/《(.*?)》/g)
  let arr=result[0].replace("《","").replace("》","")
  return arr
}
const download=(param)=>{
  let str=getStr(param.book_name)
   param.book_name=str
  fetch("http://api.one-cloud.xyz/select",{
    method:"POST",
    headers: {
      "Content-Type": "application/json",
      "accept": "application/json",
    },
    body:JSON.stringify(param)
  }).then(res=>res.json()).then(res=>{
    window.open(res.result)
  })
}

</script>

<style scoped>
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 600px;
}
.search{
  width: 50%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.result{
  height: 70%;
  width: 50%;
}
@media screen and (max-width: 700px){
  .result{
    height: 70%;
    width: 100%;
  }
  .search{
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.input-with-select{
  width: 100%;
}
</style>